<template>
  <div
    class="hi-change h-full w-full hi-scroll hi-demand"
    style="padding: 0px 24px"
  >
    <div class="hi-tab h-[auto]">
      <div class="online-icon mt-[8px]">
        <div class="grid grid-cols-4 grid-rows-2 gap-y-7 gap-x-10">
          <div
            class="mx-16px relative h-[60px] w-[60px] cursor-pointer rounded-[20px] bg-[length:60px] bg-no-repeat"
            :style="{ 'background-image': `url(${item.url})` }"
            v-for="(item,index) in props.resources" :key="index" 
            @click="handleClick(item)"
          >
            <div
              class="relative h-[62px] w-[62px]"
              v-show="checkedItem === item.url"
            >
              <img :src="selectBg" class="h-full" />
              <i
                class="iconfont icon-checked_icon absolute right-[3px] bottom-[0px] text-[16px] font-bold text-[#4a7aff]"
              ></i>
            </div>
            <!-- <div
              class="hi-mask absolute left-0 top-0 h-full w-full bg-[#000] bg-opacity-60 flex items-center justify-center rounded-[16px] opacity-0 transition-opacity hover:opacity-100 hi-demand"
            >
              <i class="iconfont icon-bianji text-[20px] text-white"></i>
            </div> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import selectBg from '../assets/image/icon-border.png';

const props = defineProps(['resources', 'data']);
const emits = defineEmits(['update:data']);
const checkedItem = ref(null);

watchEffect(() => {
  checkedItem.value = props.data;
});
const handleClick = (item) => {
  checkedItem.value = item.url;
  emits('update:data', item.url);
};
</script>
<style scoped></style>
